<template>
  <div class="o-box">
    <nav-bar>
      <template v-slot:title>订单预览</template>
    </nav-bar>
    <!-- 头部 -->
    <div
      class="
        van-cell van-cell--center van-cell--clickable van-cell--borderless
        van-contact-card van-contact-card--edit
      "
      role="button"
      tabindex="0"
      data-v-237ab9b2=""
      @click="goTo"
    >
      <i
        class="van-badge__wrapper van-icon van-icon-contact van-cell__left-icon"
      ></i>
      <div
        class="van-cell__value van-cell__value--alone van-contact-card__value"
      >
        <div>{{ address.name + " " + address.phone }}</div>
        <div>
          详细地址：{{
            address.province + address.city + address.county + address.address
          }}
        </div>
      </div>
      <i
        class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"
      ></i>
    </div>
    <!-- 商品信息 -->
    <div class="cart-box">
      <div class="cart-body" v-for="(item, index) in carList" :key="index">
        <van-checkbox-group v-model="checked">
          <van-swipe-cell>
            <div class="good-item">
              <div class="good-img">
                <img v-lazy="item.goods.cover_url" alt="" />
              </div>
              <div class="good-desc">
                <div class="good-title">
                  <span>{{ item.goods.title }}</span>
                  <span style="font-size: 14px; color: #000000"
                    >x{{ item.num }}</span
                  >
                </div>
                <div class="good-btn">
                  <div class="price">
                    <small>￥</small>{{ item.goods.price + ".00" }}
                  </div>
                </div>
              </div>
            </div>

            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </van-checkbox-group>
      </div>
      <van-submit-bar
        :price="total * 100"
        @submit="onSubmit"
        button-text="生成订单"
      >
        <span style="font-size: 12px; margin-top: 10px">商品金额</span>
      </van-submit-bar>
      <van-popup
        
        
        closeable
        position="bottom"
        :style="{ height: '30%' }"
      >
        <van-grid :border="false" :column-num="2">
          <van-grid-item>
            支付宝二维码<br />
            <van-image :src="aliyun" />
          </van-grid-item>
          <van-grid-item>
            微信二维码<br />
            <van-image :src="wechat" />
          </van-grid-item>
        </van-grid>
      </van-popup>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/NavBar.vue";
import { Toast } from "vant";
import { ref, onMounted, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import { getOrderPreview, createOrder, payOrder } from "network/order";
import { useStore } from "vuex";
export default {
  components: { NavBar },
  setup() {
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      carList: [],
      address: {},
      showPay: false,
      orderNo: "",
      aliyun: "",
      wechat: "",
    });
    const init = () => {
      Toast({ message: "加载中......", forbidClick: true });
      getOrderPreview().then((res) => {
        let address = res.address.filter((n) => n.is_default == "1");
        if (address.length == 0) {
          state.address = {
            address: "还没有设置默认地址，请选择或填写默认地址信息",
          };
        } else {
          state.address = address[0];
        }
        state.carList = res.carts;
        console.log(state.carList);
        Toast.clear();
      });
    };
    onMounted(() => {
      init();
    });
    const goTo = () => {
      router.push({
        path: "/address",
      });
    };
    const checked = ref(["a", "b"]);
    const total = computed(() => {
      let sum = 0;
      state.carList.forEach((item) => {
        sum += parseInt(item.num) * parseFloat(item.goods.price);
      });
      return sum;
    });
    const onSubmit = () => {
      const params = {
        address_id: state.address.id,
      };
      createOrder(params).then((res) => {
        Toast("创建订单成功");
        store.dispatch("updateCart");
        state.showPay = true;
        state.orderNo = res.id;
        payOrder(state.orderNo, { type: "aliyun" }).then((res) => {
          state.aliyun = res.qr_code_url;
          state.wechat = res.qr_code_url;
        });
        //  payOrder(state.orderNo, { type: "wechat" }).then(res=>{

        // });
      });
    };
    return {
      onSubmit,
      total,
      ...toRefs(state),
      checked,
      goTo,
    };
  },
};
</script>

<style scoped>
.o-box {
  margin-top: 50px;
}
.goods-card {
  margin: 0;

  background-color: #ffffff;
}

.delete-button {
  height: 100%;
}
.cart-body {
  padding-left: 10px;
}
.good-item {
  display: flex;
  margin-top: 10px;
}
.good-img > img {
  margin-left: 10px;
  margin-right: 10px;
  width: 100px;
  height: auto;
}
.good-item > .good-desc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 20px;
}
.good-item > .good-desc > .good-title {
  font-size: 15px !important;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.good-item > .good-desc > .good-btn {
  display: flex;
  justify-content: space-between;
}
.good-item > .good-desc > .good-btn > .price {
  font-size: 16px !important;
  color: red;
  line-height: 28px;
}
.good-item > .good-desc > .good-btn > .van-icon-delete {
  font-size: 20px;
  margin-top: 4px;
}
.delete-button {
  width: 50px;
  height: 100%;
}
.empty {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  margin-top: 200px;
}
.cart-box {
  padding: 5px;
}
.van-submit-bar {
  bottom: 50px;
  z-index: 0 !important;
}
</style>